<template>
  <div class="calendar-header clear">
    <div class="data-box" style="flex:1">
      <div class="data-item-box">
        <statis-item :statistics="statistics" :year="true" rangekey="yearly" label="全年"/>
      </div>
      <div class="data-item-box">
        <statis-item :statistics="statistics" :month="true" rangekey="curMonth" label="本月"/>
      </div>
      <div class="data-item-box">
        <statis-item :statistics="statistics" :day="true" rangekey="present" label="当前"/>
      </div>
    </div>
    <div class="calendar-box" >
      <div :style="{ 'text-align': headStyle.combination }" class="calendar-content" >
        <div class="calendar-prev" @click="handlePickDate('year',1)"><i class="el-icon-back" /></div>
        <div class="calendar-left" @click="handlePickDate('month',1)"><i class="el-icon-caret-left" /></div>
        <!-- <span class="calendar-headDate">{{ headOptions.date }}</span> -->
        <el-date-picker
          v-model="selectDate"
          :clearable="false"
          :editable="false"
          type="month"
          placeholder="选择月"
          format="yyyy/MM"
          @change="dateChange"
        />
        <div class="calendar-right" @click="handlePickDate('month',2)"><i class="el-icon-caret-right" /></div>
        <div class="calendar-next" @click="handlePickDate('year',2)"><i class="el-icon-right" /></div>
      </div>
      <!-- <span class="calendar-today" @click="handleToday()">今天</span> -->
    </div>
  </div>
</template>

<script>
import StatisItem from './statis-item';
export default {
  components: {
    StatisItem
  },
  props: {
    headOptions: {
      type: Object,
      default: () => null
    },
    statistics: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      headStyle: '',
      selectDate: ''
    };
  },
  watch: {
    'headOptions.date': {
      handler(newValue, oldValue) {
        const strDate = (newValue + '-01').replace(/-/g, '/');
        this.selectDate = new Date(strDate).getTime();
      }
    }
  },
  created() {
    const strDate = (this.headOptions.date + '-01').replace(/-/g, '/');
    this.selectDate = new Date(strDate).getTime();
    // this.selectDate = new Date(this.headOptions.date).getTime();
  },
  mounted() {
    this.headStyle = this.headOptions.style;
  },
  methods: {
    // 日历组件时间切换处理
    // dateFormat String eg:'year'
    // type 1后退 2前进
    handlePickDate(dateFormat, type) {
      this.$emit('handlePickDate', dateFormat, type);
    },
    // 回到今天
    handleToday() {
      this.$emit('handleToday');
    },
    // 任意选择某一天
    dateChange(date) {
      const year = date.getFullYear();
      const month = date.getMonth();
      const day = date.getDate();
      this.$emit('handleSomeDay', { year, month, day });
    }
  }
};
</script>

<style lang="scss" scope>
.calendar-header {
  display: flex;
  align-items: center;
  // margin-bottom: 20px;
  padding: 8px;
  width: 100%;
  line-height: 32px;
  display: flex;
  border: 1px solid #EBEEFD;
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  .data-box {
    flex: 1;
    display: flex;
    min-width: 228px;
    .data-item-box {
      display: flex;
      flex: 1;
      align-items: center;
      margin-right: 8px;
    }
    .data-item-box:last-child {
      margin-right: 0px;
    }
  }
  .calendar-box {
    display: flex;
    align-items: center;
    position: relative;
    height: 32px;
    margin-left: 8px;
    .calendar-content {
      width: 100%;
      display: flex;
      align-items: center;
      .calendar-prev,
      .calendar-next {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border: 1px solid #EBEEFD;
        border-radius: 4px;
        cursor: pointer;
      }
      .calendar-left,
      .calendar-right{
        cursor: pointer;
      }
      .calendar-next {
        // background: url("../assets/img/right.png") no-repeat;
        background-size: contain;
        margin-left: 14px;
      }
      .calendar-prev {
        margin-right: 14px;
      }
    }
    .dispersion {
      width: initial;
      display: inline;
    }
    .calendar-headDate {
      vertical-align: middle;
      margin: 0 12px;
      font-size: 18px;
      color: #424953;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .calendar-today {
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 30px;
      text-align: center;
      border: 1px solid #2061ff;
      border-radius: 4px;
      font-size: 14px;
      color: #2061ff;
      cursor: pointer;
    }
    .dispersion-today {
      position: inherit;
    }
    .calendar-center {
      margin: 0 auto;
    }
    .calendar-left {
      float: left;
    }
    .calendar-right {
      float: right;
    }
  }
}
</style>
<style lang="scss">
.calendar-header {
  .query-form {
    display: flex;
    flex-wrap: wrap;
  }
  .query-button {
    margin-bottom: 20px;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-table-column--selection .cell {
    padding-left: 0;
  }
  .el-input__icon {
    line-height: 32px !important;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 140px;
  }
  .el-input--suffix .el-input__inner {
    padding: 0 24px;
  }
  .el-input__icon {
    color: #406EFF;
    font-size: 17px;
    display: none;
  }
  .el-input__inner {
    border: none;
    color: #273142;
    font-size: 17px;
  }
}
</style>
